<!--头部的登录注册购物车部分组件-->
<template>
    <div>
        <div class="bottomHeader">

            <div class="log" v-if="!this.$store.state.logAfter">
                <van-icon name="shopping-cart-o" @click="noLogin"/>
                <span @click="showLog">登录/注册</span>
                <a-icon type="user"/>
            </div>
            <div class="log" v-else>
                <router-link to="/ShoppingCart" style="color: #000000">
                    <van-icon name="shopping-cart-o"/>
                </router-link>

                <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()"
                       style="font-size: 16px;margin: 0px 10px;color: #000000">
                        {{$store.state.userContent.nickname}}
                    </a>
                    <a-menu slot="overlay" placement="bottomCenter" style="margin-top: -30px;padding: 0px 12px">
                        <a-menu-item key="0">
                            个人中心
                        </a-menu-item>
                        <a-menu-item key="1">
                            我的课程
                        </a-menu-item>
                        <a-menu-item key="2">
                            我的订单
                        </a-menu-item>
                        <a-menu-item key="3" @click="success">
                            <router-link to="/">退出登录</router-link>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
                <!--                <span>{{$store.state.userContent.nickname}}</span>-->
                <img :src="$store.state.userContent.avatarUrl" alt="">
            </div>
            <!--登录注册点击后出现的模态框-->
            <Log-Register></Log-Register>
            <Register></Register>
        </div>
    </div>

</template>

<script>
    import LogRegister from "./LogRegister";
    import Register from "./Register";

    export default {
        name: "RegisterHeader.vue",
        data() {
            return {}
        },
        components: {
            LogRegister,
            Register
        },
        methods: {
            showLog() {
                this.$store.commit("changeFT", true)
            },
            noLogin() {
                this.$store.commit("changeFT", true)
            },

            success() {
                this.$message.success('退出成功');
                this.$store.dispatch("logout")

            },
        },

    }
</script>

<style scoped lang="less">
    .bottomHeader {
        font-size: 22px;

        .log {
            width: 200px;
            float: right;
            display: flex;
            align-items: center;

            span {
                font-size: 16px;
                margin: 0px 10px;
            }

            img {
                width: 32px;
                height: 32px;
                float: right;
                border-radius: 50%;
            }
        }
    }
</style>